<style scoped src="../../../../public/css/permissionsBase.css"></style>
<style scoped>
/* add */

.top {
  margin: 20px;
}
.top .top_title {
  line-height: 51px;
}
/* 议题过滤 */
.top-fil {
  width: 100%;
  height: 195px;
  flex-wrap: wrap;
  text-align: center;
  background: #d7d7d7;
}
.top-fil .top-fil-type,
.top-fil .top-fil-state {
  margin-top: 20px;
  width: 50%;
}
/* 关键字 */
.top-keywrod {
  width: 50%;
}
.top-keywrod div:first-child {
  margin-bottom: 20px;
}
.top-keywrod div:last-child button {
  margin-left: -300px;
}
/* 议题详情 */
.top-down {
  width: 110px;
  height: 40px;
  background: #18598c;
  color: #edf2f6;
  line-height: 40px;
  text-align: center;
  margin: 10px;
}
/* 切换active */
div.active {
  height: 50px;
  margin-bottom: 0px;
  line-height: 50px;
  background: #d7d7d7;
  color: #000000;
}
/* 创建议题 */
.updata::before {
  content: url(../../../assets/issues_clip.png);
  vertical-align: middle;
}
/* 职能部门意见 */
.dep-fun .dep {
  margin: 15px;
}
.dep-fun .dep:hover {
  background: #f2f2f2;
}
/* 添加职能部门意见 */
.dep-add {
  width: 80%;
  text-align: center;
}
/* 选择领导 */
.dep-led .sel {
  margin-bottom: 10px;
}
.dep-dec {
  text-align: center;
  margin-right: 20%;
}
/* 右侧锚点点击 */
.anchor {
  position: fixed;
  top: 0px;
  right: 30px;
}
.anchor ul li {
  height: 60px;
  width: 125px;
  border: 1px solid #e4e4e4;
  line-height: 60px;
  text-align: center;
  background: #f2f2f2;
}
.anchor .anchor-li.active {
  background: #18598c;
  border: 1px solid #18598c;
  color: #ffffff;
}
/* 上传按钮 */
.upload-demo .upload-demo-file::before {
  content: url(../../../assets/issues_clip.png);
  vertical-align: middle;
}
.upload-demo-img {
  width: 25%;
  border: 1px solid #c9c9c9;
  position: relative;
}
.upload-demo-img .upload-demo-img-img {
  width: 20%;
}
.upload-demo-img .upload-demo-img-img img {
  width: 100%;
}
.upload-demo-p {
  width: 75%;
}
.upload-demo-img p {
  height: 30px;
  display: block;
  width: 100%;
  word-break: keep-all; /* 不换行 */
  white-space: nowrap; /* 不换行 */
  overflow: hidden; /* 内容超出宽度时隐藏超出部分的内容 */
  text-overflow: ellipsis; /*加...*/
}
.upload-demo-img .upload-demo-button {
  width: 100%;
  height: 0%;
  position: absolute;
  background: rgba(0, 0, 0, 0.1);
  overflow: hidden;
  bottom: 0px;
  transition: all 0.5s;
}
.upload-demo-img:hover > .upload-demo-button {
  background: rgba(0, 0, 0, 0.8);
  height: 100%;
}
</style>

<template>
  <div class="top">
    <!-- 标题 -->
    <div class="top_title flex-text-between">
      <div>
        <p>议题库</p>
      </div>
      <div>
        <el-button size="small">打印</el-button>
        <el-button size="small">导出</el-button>
      </div>
    </div>
    <hr>
    <div class="flex-text-start">
      <div class="top-down pointer" :class="{active:tab == 1}" @click="tab = 1">创建议题</div>
      <!-- 议题过滤 -->
      <div class="top-down pointer" :class="{active:tab == 2}" @click="tab = 2;pullchange(pull)">
        议题过滤
        <img :src="pull?img.img1:img.img2" alt class="imgmiddle">
      </div>
      <!-- 创建领导行程 -->
      <router-link class="top-down pointer" to v-show="route">创建领导行程</router-link>
    </div>
    <div v-show="tab==2">
      <div class="top-fil flex-text-start" v-show="pull">
        <!-- 议题类型 -->
        <div class="top-fil-type">
          <span>议题类型</span>&nbsp;
          <el-select v-model="type" placeholder="请选择" size="middle" style="width:317px">
            <el-option
              v-for="item in IssueType"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </div>
        <!-- 议题状态 -->
        <div class="top-fil-state">
          <span>议题状态</span>&nbsp;
          <el-select
            v-model="state"
            placeholder="请选择"
            size="middle"
            style="width:317px"
            class="border-radius"
          >
            <el-option
              v-for="item in IssueStatus"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </div>
        <!-- 关键字 -->
        <div class="top-keywrod">
          <div>
            <span>关键字</span>&nbsp;&nbsp;&nbsp;&nbsp;
            <el-input placeholder="请输入搜索关键字" size="middle" style="width:317px" v-model="keyword"></el-input>
          </div>
          <!-- 过滤按钮 -->
          <div>
            <el-button type="primary" size="middle" class="primary">过滤</el-button>
          </div>
        </div>
      </div>
      <!-- 议题详情 -->
      <hr>
      <div>
        <el-table
          :data="tableData"
          border
          style="width: 100%;"
          @selection-change="changeFun"
          :header-cell-style="tableHeaderColor"
        >
          <el-table-column prop="name" label="议题名称" width="200"></el-table-column>
          <el-table-column prop="classes" label="类别" align="center"></el-table-column>
          <el-table-column prop="principal" label="议题负责人" align="center"></el-table-column>
          <el-table-column prop="specification" label="相关材料" align="center"></el-table-column>
          <el-table-column prop="issueStatus" label="状态" align="center">
            <template slot-scope="scope">
              <el-button
                type="text"
                size="small"
                v-if="scope.row.issueStatus==1"
                style="color:#000000"
              >草稿</el-button>
              <el-button
                type="text"
                size="small"
                v-else-if="scope.row.issueStatus==2"
                style="color:#FF0000"
              >待审核</el-button>
              <el-button
                type="text"
                size="small"
                v-else-if="scope.row.issueStatus==3"
                style="color:#2881F0"
              >已审核</el-button>
              <el-button
                type="text"
                size="small"
                v-else-if="scope.row.issueStatus==4"
                style="color:#009900"
              >关闭</el-button>
            </template>
          </el-table-column>
          <el-table-column prop="operation" label="操作" align="center" width="300">
            <template slot-scope="scope">
              <el-button
                @click="handleClick(scope.row)"
                type="text"
                size="small"
                width="190"
                class="color"
              >查看详情</el-button>
              <el-button
                type="text"
                size="small"
                v-if="scope.row.approvalStatus==1"
                style="color:#FF0000"
                width="190"
              >提交审批</el-button>
              <el-button
                type="text"
                size="small"
                v-else-if="scope.row.approvalStatus==2"
                style="color:#FF0000"
                width="190"
              >查阅审批</el-button>
              <el-button
                type="text"
                size="small"
                v-else-if="scope.row.approvalStatus==3"
                style="color:#AEAEAE"
                width="190"
              >&nbsp;&nbsp;已审核&nbsp;&nbsp;</el-button>
              <el-button type="text" size="small" width="190">编辑</el-button>
              <el-button type="text" size="small" width="190">删除</el-button>
            </template>
          </el-table-column>
          <el-table-column prop="create" align="center" type="selection" width="248"></el-table-column>
        </el-table>
      </div>
    </div>
    <!-- 创建议题 -->
    <div v-show="tab==1">
      <div class="flex-text-between">
        <div>
          <img src="../../../assets/issues_leftarrow.png" alt class="imgmiddle">
          返回
        </div>
        <div>创建议题</div>
        <div>
          <el-button size="small">保存</el-button>
        </div>
      </div>
      <hr>
      <div class="flex-text-between">
        <div style="width:100%">
          <!-- 基本信息 -->
          <div class="margin" id="am">
            <img src="../../../assets/issues_longshtring.jpg" alt class="imgmiddle">
            基本信息
          </div>
          <div style="width:80%">
            <el-form ref="basic" :model="basic" label-width="80px">
              <el-form-item label="议题类型">
                <template>
                  <el-radio v-model="basic.radio" label="1">调研决策</el-radio>
                  <el-radio v-model="basic.radio" label="2">网信委会议</el-radio>
                  <el-radio v-model="basic.radio" label="3">投资立项</el-radio>
                  <el-radio v-model="basic.radio" label="4">产品评审</el-radio>
                </template>
              </el-form-item>
              <!-- 议题名称 -->
              <el-form-item label="议题名称">
                <el-input v-model="basic.name" placeholder="添加议题名称"></el-input>
              </el-form-item>
              <!-- 汇报材料上传 -->
              <el-form-item label="汇报材料">
                <el-upload
                  class="upload-demo"
                  action="https://jsonplaceholder.typicode.com/posts/"
                  :on-preview="handlePreview"
                  :on-remove="handleRemove"
                  :before-remove="beforeRemove"
                  multiple
                  :limit="3"
                  :on-exceed="handleExceed"
                  :file-list="basic.fileList"
                  :before-upload="beforeAvatarUpload"
                  ref="fileInput"
                >
                  <el-button size="small" class="upload-demo-file">点击上传</el-button>
                  <span slot="tip" class="file-tip">单个附件最大支持100M</span>
                  <div class="flex-text-between" slot="tip">
                    <div
                      class="flex-text-around upload-demo-img pointer"
                      v-for="item of upload"
                      :key="item.index"
                    >
                      <div class="upload-demo-img-img">
                        <img :src="item.img" alt>
                      </div>
                      <div class="upload-demo-p">
                        <p>{{item.title}}</p>
                        <p>{{item.time}}</p>
                        <p>{{item.size}}M</p>
                        <!-- 朦板 -->
                      </div>
                      <div class="upload-demo-button flex-text-around">
                        <el-button>更新文件</el-button>
                        <el-button type="danger" @click="deled()">删除文件</el-button>
                      </div>
                    </div>
                  </div>
                </el-upload>
              </el-form-item>
              <!-- 议题备注 -->
              <el-form-item label="议题备注">
                <el-input type="textarea" :rows="1" placeholder="关于该议题的相关说明" v-model="basic.remark"></el-input>
              </el-form-item>
            </el-form>
          </div>
          <!-- 职能部门意见 -->
          <div class="margin" id="bm">
            <img src="../../../assets/issues_longshtring.jpg" alt class="imgmiddle">
            职能部门意见
          </div>
          <div class="dep-fun width">
            <comments :showComments="idea[0]"></comments>
          </div>
          <!-- 添加职能部门意见 需添加功能-->
          <div class="dep-add">
            <add-comments :comments="leader[0]" @getchild="getchild"></add-comments>
          </div>
          <hr>
          <!-- 领导意见 -->
          <div class="margin" id="cm">
            <img src="../../../assets/issues_longshtring.jpg" alt class="imgmiddle">
            添加领导意见
          </div>
          <div class="dep-fun width">
            <comments :showComments="idea[1]"></comments>
          </div>
          <div class="dep-add">
            <!-- 添加职能部门领导意见 需添加功能-->
            <add-comments :comments="leader[1]" @getchild="getchild"></add-comments>
          </div>
          <hr>
          <!-- 决策事项 -->
          <div class="margin">
            <img src="../../../assets/issues_longshtring.jpg" alt class="imgmiddle">
            决策事项
          </div>
          <div class="dep-dec">
            <i class="el-icon-plus"></i>
            <span>需要决策事项</span>
          </div>
        </div>
        <!-- 右侧锚点点击 -->
        <div class="anchor">
          <ul class="ulnone pointer">
            <li
              v-for="(item,i) in anchordata"
              :key="i"
              @click="anchor(i)"
              class="anchor-li"
              :class="i==anchorindex?'active':' '"
            >
              <img :src="item.img" alt>
              {{item.title}}
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import addComments from "./addcomments";
import comments from "./comments";
export default {
  components: {
    addComments: addComments,
    comments: comments
  },
  data() {
    return {
      activeIndex: "1",
      // 议题类型
      IssueType: [
        {
          value: "1",
          label: "公司董事会"
        },
        {
          value: "2",
          label: "公司党委全面工作"
        },
        {
          value: "3",
          label: "公司战略规划"
        },
        {
          value: "4",
          label: "干部管理"
        },
        {
          value: "5",
          label: "重大风险管控"
        },
        {
          value: "6",
          label: "法务工作"
        },
        {
          value: "7",
          label: "公司(党委)办公室"
        },
        {
          value: "8",
          label: "北京办事处"
        }
      ],
      // 议题状态
      IssueStatus: [
        {
          value: "1",
          label: "全部"
        },
        {
          value: "2",
          label: "草稿"
        },
        {
          value: "3",
          label: "待审批"
        },
        {
          value: "4",
          label: "已审批"
        },
        {
          value: "5",
          label: "关闭"
        }
      ],
      type: "",
      state: "",
      keyword: "",
      // 议题详情数据
      checkBoxData: [], //多选框选择的值
      // 备注:状态数字 1:草稿;2:待审核;3:已审核;4:关闭;
      // 审批状态:1:提交审批;2:查阅审批;3:已审核
      tableData: [
        {
          name: "mocus立项事宜议题",
          classes: "投资立项",
          principal: "甘处",
          specification: "无",
          issueStatus: "1",
          approvalStatus: "1",
          operation: ""
        },
        {
          name: "mocus立项事宜议题",
          classes: "投资立项",
          principal: "甘处",
          specification: "无",
          issueStatus: "2",
          approvalStatus: "3",
          operation: ""
        },
        {
          name: "mocus立项事宜议题",
          classes: "投资立项",
          principal: "甘处",
          specification: "无",
          issueStatus: "3",
          approvalStatus: "3",
          operation: ""
        },
        {
          name: "mocus立项事宜议题",
          classes: "投资立项",
          principal: "甘处",
          specification: "无",
          issueStatus: "4",
          approvalStatus: "2",
          operation: ""
        }
      ],
      // 显示影藏
      tab: 2,
      pull: true,
      img: {
        img1: require("../../../assets/arrowsup.png"),
        img2: require("../../../assets/arrowsdown.png")
      },
      //基本信息form表单
      basic: {
        name: undefined,
        report: undefined,
        remark: undefined,
        radio: undefined
      },
      idea: [
        // 职能部门意见
        {
          did: 1,
          departmentIdea: [
            {
              name: "*****部门一",
              labelId: "",
              comment:
                "MOCUS相关业务使用场景方案MOCUS相关业务使用场景方案MOCUS相关业务使用场景方案MOCUS相关业务使用场景方案MOCUS相关业务使用场景方案MOCUS相关业务使用场景方案MOCUS相关业务使用场景方案MOCUS相关业务使用场景方案MOCUS相关业务使用场景方案MOCUS相关业务使用场景方案MOCUS相关业务使用场景方案MOCUS相关业务使用场景方案MOCUS相关业务使用场景方案MOCUS相关业务使用场景方案MOCUS相关业务使用场景方案"
            },
            {
              name: "*****部门一",
              labelId: "",
              comment:
                "MOCUS相关业务使用场景方案MOCUS相关业务使用场景方案MOCUS相关业务使用场景方案MOCUS相关业务使用场景方案MOCUS相关业务使用场景方案MOCUS相关业务使用场景方案MOCUS相关业务使用场景方案MOCUS相关业务使用场景方案MOCUS相关业务使用场景方案MOCUS相关业务使用场景方案MOCUS相关业务使用场景方案MOCUS相关业务使用场景方案MOCUS相关业务使用场景方案MOCUS相关业务使用场景方案MOCUS相关业务使用场景方案"
            }
          ]
        },
        // 领导意见
        {
          did: 2,
          departmentIdea: [
            {
              name: "*****部门一",
              labelId: "",
              comment:
                "MOCUS相关业务使用场景方案MOCUS相关业务使用场景方案MOCUS相关业务使用场景方案MOCUS相关业务使用场景方案MOCUS相关业务使用场景方案MOCUS相关业务使用场景方案MOCUS相关业务使用场景方案MOCUS相关业务使用场景方案MOCUS相关业务使用场景方案MOCUS相关业务使用场景方案MOCUS相关业务使用场景方案MOCUS相关业务使用场景方案MOCUS相关业务使用场景方案MOCUS相关业务使用场景方案MOCUS相关业务使用场景方案"
            }
          ]
        }
      ],
      // 职能部门领导数据
      leader: [
        {
          did: 1,
          name: undefined,
          comment: undefined,
          options: [
            {
              leaderId: "1",
              label: "黄金糕"
            },
            {
              leaderId: "2",
              label: "双皮奶"
            },
            {
              leaderId: "3",
              label: "蚵仔煎"
            },
            {
              leaderId: "4",
              label: "龙须面"
            },
            {
              leaderId: "5",
              label: "北京烤鸭"
            }
          ],
          value: ""
        },
        // 领导审批领导数据
        {
          did: 2,
          name: undefined,
          comment: undefined,
          options: [
            {
              leaderId: "1",
              label: "黄金糕"
            }
          ]
        }
      ],
      //锚点数据
      anchordata: [
        { title: "基本信息" },
        { title: "职能部门意见" },
        { title: "领导意见" },
        {
          title: "回到顶部",
          img: require("../../../assets/issues_uparrows.png")
        }
      ],
      anchorindex: 0,
      //创建行程
      route: true,
      //上传文件数据
      upload: [
        {
          img: require("../../../assets/issues_word.png"),
          title: "MOCUS相关业务使用场景方案11111111111111",
          time: "2018-11-06 09:08",
          size: "98.6"
        },
        {
          img: require("../../../assets/issues_excel.png"),
          title: "MOCUS相关业务使用场景方案",
          time: "2018-11-06 09:08",
          size: "98.6"
        },
        {
          img: require("../../../assets/issues_pdf.png"),
          title: "MOCUS相关业务使用场景方案",
          time: "2018-11-06 09:08",
          size: "98.6"
        }
      ]
    };
  },
  methods: {
    // 获取领导评论子组件数据
    getchild(issueIdea) {
      var comments = {
        name: issueIdea.name,
        leaderId: issueIdea.leaderId,
        comment: issueIdea.comment
      };
      console.log(comments);
      this.idea[issueIdea.did - 1].departmentIdea.push(comments);
    },
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClick(row) {
      console.log(row);
    },
    //发生变化时触发事件
    changeFun(val) {
      this.checkBoxData = val;
    },
    //设置表头背景颜色
    tableHeaderColor({ row, column, rowIndex, columnIndex }) {
      if (rowIndex === 0) {
        return "background-color:#D7D7D7;color: #000000;font-weight: 500;";
      }
    },
    // 点击显示详情过滤页面
    pullchange(pull) {
      this.pull = !this.pull;
    },
    //锚点点击事件
    anchor(index) {
      this.anchorindex = index;
      if (index == 0) {
        document.getElementById("am").scrollIntoView();
      } else if (index == 1) {
        document.getElementById("bm").scrollIntoView();
      } else if (index == 2) {
        document.getElementById("cm").scrollIntoView();
      } else {
        document.body.scrollTop = 0;
        document.documentElement.scrollTop = 0;
      }
    },
    // 上传
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePreview(file) {
      console.log(file);
    },
    handleExceed(files, fileList) {
      this.$message.warning(
        `当前限制选择 3 个文件，本次选择了 ${
          files.length
        } 个文件，共选择了 ${files.length + fileList.length} 个文件`
      );
    },
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${file.name}?`);
    },
    beforeAvatarUpload(file) {
      var testmsg = file.name.substring(file.name.lastIndexOf(".") + 1);
      const extension = testmsg === "xls";
      const extension2 = testmsg === "xlsx";
      const extension3 = testmsg === "doc";
      const extension4 = testmsg === "pdf";
      const isLt100M = file.size / 1024 / 1024 < 100;
      if (!extension && !extension2) {
        this.$message({
          message: "上传文件只能是 word excel pdf 文件!",
          type: "warning"
        });
      }
      if (!isLt100M) {
        this.$message({
          message: "上传文件大小不能超过 100MB!",
          type: "warning"
        });
      }
      return extension || (extension2 && isLt2M);
    },
    deled() {
      let value = this.$refs.fileInput.uploadFiles;
      let value1 = this.$refs.fileInput.file;
      console.log(value1);
    },
    created() {
      // 异步请求
    }
  }
};
</script>
